<?php
require '../check/check.php';
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>试题归类列表</title>
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="../css/global.css" media="all">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/table.css"/>
    <script type="text/javascript" src="../../js/jquery-3.2.0.min.js"></script>
</head>
<body>
<div class="admin-main">
    <blockquote class="layui-elem-quote">
        <a href="#" class="layui-btn layui-btn-small" id="add">
            <i class="layui-icon">&#xe608;</i> 添加试题归类
        </a>
        <div class="layui-input-inline" style="float:right;">
            <div class="layui-input-inline">
                <input type="text" name="classifyname" placeholder="试题归类名称" autocomplete="off" class="layui-input">
            </div>
            <a href="#" class="layui-btn layui-btn-small" id="search">
                <i class="layui-icon">&#xe615;</i> 搜索
            </a>
        </div>
    </blockquote>
    <fieldset class="layui-elem-field">
        <legend>试题归类列表</legend>
        <div class="layui-field-box">
            <table class="site-table table-hover">
                <thead>
                <tr>
                    <th style="text-align: center">试题归类编号
                    </th>
                    <th style="text-align: center">试题归类名称
                    </th>
                    <th style="text-align: center">试题归类备注</th>
                    <th style="text-align: center">录入日期</th>
                    <th style="text-align: center">操作</th>
                </tr>
                </thead>
                <tbody id="content">
                </tbody>
            </table>
        </div>
    </fieldset>
    <div class="admin-table-page">
        <div id="paged" class="page">
        </div>
    </div>
</div>
<!--模板-->
<script type="text/html" id="tpl">
    {{# layui.each(d.list, function(index, item){ }}
    <tr>
        <td>{{ item.classifyid }}</td>
        <td>{{ item.classifyname }}</td>
        <td>{{ item.memo }}</td>
        <td>{{ item.inputdate }}</td>
        <td>
            <a href="javascript:;" data-name="{{ item.classifyid }}" data-opt="edit"
               class="layui-btn layui-btn-mini" >修改</a>
            <a href="javascript:;" data-name="{{ item.classifyid }}" data-opt="del"
               class="layui-btn layui-btn-danger layui-btn-mini" >删除</a>
        </td>
    </tr>
    {{# }); }}
</script>
<script type="text/javascript" src="../plugins/layui/layui.js"></script>
<script>
    var addBoxIndex = -1;
    var editBoxIndex = -1;
    $(function () {
        getClassifyList('');
    });
    function editclassify(){
        var $that = $(this).parent().parent();
        classifyid = $(this).data('name');
        if (editBoxIndex != -1 || addBoxIndex !=-1){
            layer.msg('试题归类操作页面不能同时打开多个');
            return;
        }
        $.get('template/classify.html', null, function (form) {
            editBoxIndex = layer.open({
                type: 1,
                title: '修改试题归类',
                content: form,
                btn: ['提交', '取消'],
                shade: false,
                offset: ['80px', '5%'],
                area: ['600px', '380px'],
                zIndex: 4,
                maxmin: true,
                yes: function (index) {
                    $('form.layui-form').find('button[lay-filter=save]').click();
                },
                full: function (elem) {
                    var win = window.top === window.self ? window : parent.window;
                    $(win).on('resize', function () {
                        var $this = $(this);
                        elem.width($this.width()).height($this.height()).css({
                            top: 0,
                            left: 0
                        });
                        elem.children('div.layui-layer-content').height($this.height() - 95);
                    });
                },
                success: function (layero, index) {
                    //弹出窗口成功后渲染表单
                    var form = layui.form();
                    form.render();
                    $.ajax({
                        url: 'classify.php',
                        type: "post",
                        dataType: "json",
                        data: 'method=getClassifyById&classifyid=' + classifyid,
                        success: function (result) {
                            $('form.layui-form').find('input[name=classifyid]').val(result[0].classifyid);
                            $('form.layui-form').find('input[name=classifyname]').val(result[0].classifyname);
                            $('form.layui-form').find('textarea[name=memo]').val(result[0].memo);
                            $('form.layui-form').find('input[name=classifyid]').attr("readonly","readonly");
                            $('form.layui-form').find('input[name=classifyname]').focus();
                        }
                    });
                    form.on('submit(save)', function (data) {
                        $.ajax({
                            url: 'classify.php',
                            type: "post",
                            dataType: "json",
                            data: 'method=updateClassify&classifyid=' + $.trim(data.field.classifyid) + '&classifyname='
                            + $.trim(data.field.classifyname) + '&memo=' + $.trim(data.field.memo),
                            success: function (result) {
                                layer.msg(result.msg, {time: 800}, function () {
                                    if (result.errorCode == 0) {
                                        $that.children().eq(1).html(data.field.classifyname);
                                        $that.children().eq(2).html(data.field.memo);
                                        layer.closeAll();
                                        return false;
                                    } else {
                                        $('form.layui-form').find('input[name=classifyname]').focus();
                                        return false;
                                    }
                                });
                            }, error: function () {
                            }
                        });
                        return false;
                    });
                },
                end: function () {
                    editBoxIndex = -1;
                }
            });
        });
    }
    function delclassify(){
        var $that = $(this).parent().parent();
        classifyid = $(this).data('name');
        classifyname = $that.children().eq(1).html();
        delmsg = '你确认要删除当前记录？<br>' + '试题归类编号：'+classifyid + '<br>试题归类名称：'+classifyname;
        layer.confirm(delmsg , {icon: 3, title:'提示'}, function(){
            $.ajax({
                url: 'classify.php',
                type: "post",
                dataType: "json",
                data: 'method=deleteClassify&classifyid=' + classifyid,
                success: function (result) {
                    layer.msg(result.msg, {time: 800}, function () {
                        //删除表格中对应的数据行
                        if (result.errorCode == 0){
                            $that.remove();
                            if ($('#content tr').length == 0 ){
                                location.reload();
                            }
                        }
                    });
                }
            });
        });
    }
    function getClassifyList(classifyname) {
        layui.config({
            base: '../js/'
        });
        layui.use(['paging', 'form', 'layer'], function () {
            var $ = layui.jquery,
                paging = layui.paging(),
                layerTips = parent.layer === undefined ? layui.layer : parent.layer, //获取父窗口的layer对象
                layer = layui.layer, //获取当前窗口的layer对象
                form = layui.form();
            paging.init({
                url: 'classify.php', //地址
                elem: '#content', //内容容器
                params: { //发送到服务端的参数
                    method: 'getClassifyListByPage',
                    classifyname: classifyname
                },
                type: 'post',
                tempElem: '#tpl', //模块容器
                pageConfig: { //分页参数配置
                    elem: '#paged' //分页容器
//                  pageSize: 3 //使用paging.js配置的默认值15
                },
                success: function () { //渲染成功的回调
                },
                fail: function () { //获取数据失败的回调
                },
                complate: function () { //完成的回调
                    //绑定按钮事件
                    $('#content').children('tr').each(function (data) {
                        var $that = $(this);
                        $that.children('td:last-child').children('a[data-opt=edit]').on('click',editclassify);
                        $that.children('td:last-child').children('a[data-opt=del]').on('click',delclassify);
                    });
                },
            });
        });
    }
    $('#add').on('click', function () {
        if (editBoxIndex != -1 || addBoxIndex !=-1){
            layer.msg('试题归类操作页面不能同时打开多个');
            return;
        }
        $.get('template/classify.html', null, function (form) {
            addBoxIndex = layer.open({
                type: 1,
                title: '添加试题归类',
                content: form,
                btn: ['提交', '取消'],
                shade: false,
                offset: ['80px', '5%'],
                area: ['600px', '380px'],
                zIndex: 4,
                maxmin: true,
                yes: function (index) {
                    $('form.layui-form').find('button[lay-filter=save]').click();
                },
                full: function (elem) {
                    var win = window.top === window.self ? window : parent.window;
                    $(win).on('resize', function () {
                        var $this = $(this);
                        elem.width($this.width()).height($this.height()).css({
                            top: 0,
                            left: 0
                        });
                        elem.children('div.layui-layer-content').height($this.height() - 95);
                    });
                },
                success: function (layero, index) {
                    //弹出窗口成功后渲染表单
                    var form = layui.form();
                    form.render();
                    form.on('submit(save)', function (data) {
                        $.ajax({
                            url: 'classify.php',
                            type: "post",
                            dataType: "json",
                            data: 'method=addClassify&classifyid=' + $.trim(data.field.classifyid) + '&classifyname='
                            + $.trim(data.field.classifyname) + '&memo=' + $.trim(data.field.memo),
                            success: function (result) {
                                layer.msg(result.msg, {time: 800}, function () {
                                    if (result.errorCode == 0) {
                                        $('#content').prepend('<tr></tr>');
                                        $('#content tr:first').append('<td>'+ data.field.classifyid + '</td>');
                                        $('#content tr:first').append('<td>'+ data.field.classifyname + '</td>');
                                        $('#content tr:first').append('<td>'+ data.field.memo + '</td>');
                                        $('#content tr:first').append('<td>'+ result.inputdate + '</td>');

                                        $('#content tr:first').append("<td><a href='javascript:;' data-opt='edit' " +
                                            "class='layui-btn layui-btn-mini' data-name='"+data.field.classifyid+"'>修改</a> " +
                                            "<a href='javascript:;' data-opt='del' " +
                                            "class='layui-btn layui-btn-danger layui-btn-mini' data-name='"+data.field.classifyid+"'>删除</a></td>");
                                        //需要动态绑定事件
                                        $('#content tr:first').children('td:last-child').children('a[data-opt=del]').on('click',delclassify);
                                        $('#content tr:first').children('td:last-child').children('a[data-opt=edit]').on('click',editclassify);

                                        $('form.layui-form').find('input[name=classifyid]').val('');
                                        $('form.layui-form').find('input[name=classifyname]').val('');
                                        $('form.layui-form').find('textarea[name=memo]').val('');
                                        $('form.layui-form').find('input[name=classifyid]').focus();
                                    } else {
                                        $('form.layui-form').find('input[name=classifyid]').focus();
                                        return false;
                                    }
                                });
                            }, error: function () {
                            }
                        });
                        return false;
                    });
                },
                end: function () {
                    addBoxIndex = -1;
                }
            });
        });
    });
    $('#search').on('click', function () {
        getClassifyList($.trim($('input[name=classifyname]').val()));
    });
</script>
</body>
</html>